<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>即时聊天</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/chat.css"/>
</head>
<body>
    <section class="aui-chat" id="chat_content">
        <div class="aui-chat-header" id="now"></div>
        <script type="text/javascript">
            var now = document.getElementById('now');
            now.innerHTML = ''+getNowFormatDate();
            function getNowFormatDate() {
                var date = new Date();
                var seperator1 = "-";
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = year + seperator1 + month + seperator1 + strDate;
                return currentdate;
            }
        </script>
        <div class="aui-chat-item aui-chat-left">
            <div class="aui-chat-media">
                <img src="../image/demo2.png" />
            </div>
            <div class="aui-chat-inner">
                <div class="aui-chat-name">指挥中心</div>
                <div class="aui-chat-content">
                    <div class="aui-chat-arrow"></div>
                    各部门汇报情况
                </div>
                <div class="aui-chat-status aui-chat-status-refresh">
                    <i class="aui-iconfont aui-icon-correct aui-text-success"></i>
                </div>
            </div>
        </div>
        <div class="aui-chat-item aui-chat-right">
            <div class="aui-chat-media">
                <img src="../image/liulangnan.png" />
            </div>
            <div class="aui-chat-inner">
                <div class="aui-chat-name">我</div>
                <div class="aui-chat-content">
                    <div class="aui-chat-arrow"></div>
                    已收到指挥中心指令，马上回话
                </div>
                <div class="aui-chat-status">
                    <i class="aui-iconfont aui-icon-correct aui-text-success"></i>
                </div>
            </div>
        </div>

    </section>
    <div class="aui-content" id="message">
        <div class=" aui-border-radius">
            <div>
                <input type="text" id="message_input">
                <button type="button" id="messageBtn">发送</button>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript">
    let message = document.getElementById('message_input'),
        messageBtn = document.getElementById("messageBtn");
    message.addEventListener('keyup',function () {
        if(message.value.length >= 1)
            messageBtn.style.backgroundColor = '#11B6F4';
        if(message.value.length === 0)
            messageBtn.style.backgroundColor = '#ddd';
    });
    messageBtn.addEventListener('click',function () {
        var chat_content = document.getElementById('chat_content');
        chat_content.innerHTML +=
            '        <div class="aui-chat-item aui-chat-right">\n' +
            '            <div class="aui-chat-media">\n' +
            '                <img src="../image/liulangnan.png" />\n' +
            '            </div>\n' +
            '            <div class="aui-chat-inner">\n' +
            '                <div class="aui-chat-name">我</div>\n' +
            '                <div class="aui-chat-content">\n' +
            '                    <div class="aui-chat-arrow"></div>\n' + message.value +
            '                       \n' +
            '                </div>\n' +
            '                <div class="aui-chat-status">\n' +
            '                    <i class="aui-iconfont aui-icon-correct aui-text-success"></i>\n' +
            '                </div>\n' +
            '            </div>\n' +
            '        </div>';
        message.value = "";
        messageBtn.style.backgroundColor = '#ddd';
    });
</script>
</html>